import 'package:flutter/material.dart';
import 'package:flutter_food_ordering_web/model/cart_model.dart';
import 'package:flutter_food_ordering_web/model/food_model.dart';
import 'package:flutter_food_ordering_web/res/dimens.dart';
import 'package:flutter_food_ordering_web/widget/centered_view.dart';
import 'package:flutter_food_ordering_web/widget/food_card.dart';
import 'package:flutter_food_ordering_web/widget/load_image.dart';
import 'package:flutter_food_ordering_web/widget/navigation_bar.dart';
import 'package:provider/provider.dart';

class StorePage extends StatefulWidget {
  StorePage({Key key}) : super(key: key);

  @override
  _StorePageState createState() => _StorePageState();
}

class _StorePageState extends State<StorePage> {

  //选择哪个分类下的商品
  int _categorySelected = 0;
  //显示第几页
  int _page = 1;
  //总页数
  int _totalPage = 3;
  //购物数量
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    
    var cart = Provider.of<Cart>(context);

    return Scaffold(
      body: CenteredView(
       child: Scrollbar(
         child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              NavigationBar(count: cart.cartItems.length),
              Container(
                height: 520,
                child: Stack(
                  children: <Widget>[
                    Positioned(
                      left: 0,
                      top: 0,
                      right: 0,
                      child: LoadAssetImage('store/banner',
                        width: double.infinity,
                      )
                    ),
                    Positioned(
                      left: 0,
                      top: 344,
                      right: 0,
                      child: LoadAssetImage('store/store_mid_bg',
                        width: double.infinity,
                      )
                    ),
                    Positioned(
                      left: 0,
                      top: 380,
                      right: 0,
                      child: Text('这是一点主食介绍，今天的主食有美味的米饭，超人气的火锅，更有粥类水饺美味……',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 15,
                          color: Colors.white
                        ),
                      )
                    ),
                    Positioned(
                      left: 83,
                      top: 410,
                      child: LoadAssetImage('store/order_time_tip',
                        width: 97,
                        height: 78,
                      )
                    ),
                    Positioned(
                      left: 0,
                      top: 472,
                      right: 0,
                      child: Container(
                        width: double.infinity,
                        child: _buildFoodFilter()
                      )
                    )
                  ],
                ),
              ),
              _buildFoodList(),
              Padding(
                padding: const EdgeInsets.only(right: 80, bottom: 48),
                child: _buildPaginationBar(),
              )
            ]
          ),
        )
       ),
      )
    );
  }

  Widget _buildFoodFilter() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(foodTypes.length, (index) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 25),
          child: FlatButton(
            onPressed: (){
              setState(() {
                _categorySelected = index;
              });
            },
            color: _categorySelected == index ? Color(0xffdddddd) : Color(0xfff6f6f6),
            child: Container(
              alignment: Alignment.center,
              width: 80,
              height: 28,
              child: Text(foodTypes[index],
                style: TextStyle(
                  fontSize: Dimens.font_sp12,
                  color: Color(0xff462708)
                ),
              ),
            )
          ),
        );
      }),
    );
  }

  Widget _buildFoodList() {
    return Padding(
      padding: const EdgeInsets.only(left: 80, right: 80, top: 35, bottom: 40),
      child: GridView.builder(
        itemCount: foods.length,
        physics: BouncingScrollPhysics(),
        shrinkWrap: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 4 / 6,
          //上下间隔
          mainAxisSpacing: 36,
          //左右间隔
          crossAxisSpacing: 82,
        ),
        itemBuilder: (context, index) {
          return FoodCard(foods[index]);
        }
      ),
    );
  }

  //分页导航条
  Widget _buildPaginationBar() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        //上一页按钮
        _buildPreviousPageButton(),
        Row(
          children: List.generate(_totalPage, (index) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 2),
              child: InkWell(
                onTap: () {
                  setState(() {
                    _page = index + 1;
                  });
                },
                child: Container(
                  width: 24,
                  height: 24,
                  decoration: _page == index + 1 ? 
                    BoxDecoration(
                      color: Colors.white,
                      border: Border.all(
                        color: Color(0xffdddddd),
                        width: 1
                      )
                    ) :
                    BoxDecoration(
                      color: Color(0xfff4f4f4),
                      border: Border.all(
                        color: Color(0xffdddddd),
                        width: 1
                      )
                    ),
                  child: Center(
                    child: Text('${index + 1}',
                      style: TextStyle(
                        fontSize: Dimens.font_sp10,
                        color: Color(0xff462708)
                      ),
                    ),
                  ),
                ),
              )
            );
          }),
        ),
        //下一页按钮
        _buildNextPageButton()
      ],
    );
  }

  //上一页按钮
  Widget _buildPreviousPageButton() {
    return InkWell(
      onTap: _page == 1 ? null : () {
        setState(() {
          if (--_page < 1) {
            _page = 1;
          }
        });
      },
      child: Container(
        width: 65,
        height: 25,
        decoration: _page == 1 ? 
          BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Color(0xffdddddd),
              width: 0.5
            )
          ) :
          BoxDecoration(
            color: Color(0xfff4f4f4),
            border: Border.all(
              color: Color(0xffdddddd),
              width: 0.5
            )
          ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            LoadAssetImage('store/store_left_arrow',
              width: 5,
              height: 5.5,
            ),
            SizedBox(width: 6),
            Text('上一页',
              style: TextStyle(
                fontSize: Dimens.font_sp10,
                color: _page == 1 ? Color(0xffc2c2c2) : Color(0xff462708)
              ),
            )
          ],
        ),
      ),
    );
  }
  
  //下一页按钮
  Widget _buildNextPageButton() {
    return InkWell(
      onTap: _page == _totalPage ? null : () {
        setState(() {
          if (++_page > _totalPage) {
            _page = _totalPage;
          }
        });
      },
      child: Container(
        width: 65,
        height: 25,
        decoration: _page == _totalPage ? 
          BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Color(0xffdddddd),
              width: 0.5
            )
          ) :
          BoxDecoration(
            color: Color(0xfff4f4f4),
            border: Border.all(
              color: Color(0xffdddddd),
              width: 0.5
            )
          ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text('上一页',
              style: TextStyle(
                fontSize: Dimens.font_sp10,
                color: _page == _totalPage ? Color(0xffc2c2c2) : Color(0xff462708)
              ),
            ),
            SizedBox(width: 6),
            LoadAssetImage('store/store_right_arrow',
              width: 5,
              height: 5.5,
            )
          ],
        ),
      ),
    );
  }
}